<template>
  <div class="page-content">
    <el-button @contextmenu.prevent="showMenu"> 右键触发菜单 </el-button>

    <!-- 右键菜单组件 -->
    <ArtMenuRight
      ref="menuRef"
      :menu-items="menuItems"
      :menu-width="160"
      :submenu-width="200"
      :border-radius="10"
      @select="handleSelect"
      @show="onMenuShow"
      @hide="onMenuHide"
    />
  </div>
</template>

<script setup lang="ts">
  import { ref, computed, nextTick } from 'vue'
  import ArtMenuRight from '@/components/core/others/ArtMenuRight.vue'
  import type { MenuItemType } from '@/components/core/others/ArtMenuRight.vue'
  import { ElMessage } from 'element-plus'

  const menuRef = ref<InstanceType<typeof ArtMenuRight>>()
  const lastAction = ref('')

  // 右键菜单选项
  const menuItems = computed((): MenuItemType[] => [
    {
      key: 'copy',
      label: '复制',
      icon: '&#xe7b2;'
    },
    {
      key: 'paste',
      label: '粘贴',
      icon: '&#xe70b;'
    },
    {
      key: 'cut',
      label: '剪切',
      icon: '&#xe7b8;',
      showLine: true
    },
    {
      key: 'export',
      label: '导出选项',
      icon: '&#xe78b;',
      children: [
        {
          key: 'exportExcel',
          label: '导出 Excel',
          icon: '&#xe604;'
        },
        {
          key: 'exportPdf',
          label: '导出 PDF',
          icon: '&#xe89e;'
        }
      ]
    },
    {
      key: 'edit',
      label: '编辑选项',
      icon: '&#xe706;',
      children: [
        {
          key: 'rename',
          label: '重命名',
          icon: '&#xe607;'
        },
        {
          key: 'duplicate',
          label: '复制副本',
          icon: '&#xe608;'
        }
      ]
    },
    {
      key: 'share',
      label: '分享',
      icon: '&#xe73b;',
      showLine: true
    },
    {
      key: 'delete',
      label: '删除',
      icon: '&#xe850;'
    },
    {
      key: 'disabled',
      label: '禁用选项',
      icon: '&#xe619;',
      disabled: true
    }
  ])

  const handleSelect = (item: MenuItemType) => {
    lastAction.value = `${item.label} (${item.key})`
    ElMessage.success(`执行操作: ${item.label}`)
    console.log('选择了菜单项:', item)
  }

  const showMenu = (e: MouseEvent) => {
    console.log('触发右键菜单', e)
    // 确保阻止默认行为
    e.preventDefault()
    e.stopPropagation()

    // 延迟一帧执行，确保事件处理完成
    nextTick(() => {
      menuRef.value?.show(e)
    })
  }

  const onMenuShow = () => {
    console.log('菜单显示')
  }

  const onMenuHide = () => {
    console.log('菜单隐藏')
  }
</script>
